{extend name="common/layout" /}

{block name="contents"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-title">
                    <h5>{$title}</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <form method="post" target="_subifr">
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">头像</label>
                            <div class="col-sm-5" style="position: relative">
                                <input type="file" id="file_upload" placeholder="请选择上传文件" name="file" data-url="{:url('singleFileUpload')}" class="form-control">
                            </div>
                            <div class="col-sm-3">
                                <div style="margin-left:20px;" id="avatar-box">
                                    <input type="hidden" name="avatar" value="{$user.avatar|default='/static/inspinia/img/profile_small.jpg'}">
                                    <img style="max-height:50px;" src="{$user.avatar|default='/static/inspinia/img/profile_small.jpg'}" alt="avatar">
                                </div>
                            </div>
                        </div>
                        <div class="form-group  row">
                            <label class="col-sm-2 col-form-label">姓名</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="name" value="{$user.name|default=''}">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">帐号名</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control" name="username" value="{$user.username|default=''}">
                                <span class="form-text m-b-none"></span>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group row">
                            <div class="col-sm-4 col-sm-offset-2">
                                <a href="{:url('index/index')}" class="btn btn-white btn-sm">取消</a>
                                <button class="btn btn-primary btn-sm" type="submit">保存更改</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="js"}
<script src="/static/plugins/jQuery-File-Upload-9.30.0/js/vendor/jquery.ui.widget.js"></script>
<script src="/static/plugins/jQuery-File-Upload-9.30.0/js/jquery.iframe-transport.js"></script>
<script src="/static/plugins/jQuery-File-Upload-9.30.0/js/jquery.fileupload.js"></script>
<script>
    $(function(){
        $('#file_upload').fileInputBeautiful().fileupload({
            dataType: 'json',
            done:function(e,data){
                const result = data.result;
                if(result.success){
                    $('input[name="avatar"]').val(result.data.path);
                    $('#avatar-box').children('img').attr('src',result.data.path);
                    toastr.success(result.msg,'提示');
                    return;
                }
                toastr.error(result.msg,'提示');
            }
        });
    });
</script>
{/block}